<template>
  <div class="shop-list">
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">
          <i class="el-icon-s-home"></i>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-chat-line-round"></i>
          积分商城
        </el-breadcrumb-item>
        <!-- 当前 -->
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="Hidd" class="content">
      <div class="header-filter">
        <ul style="list-style: none;display: flex;">
          <li @click="changeI(item, index)" v-for="(item, index) in list" :class="i == index ? 'ul-li2' : 'ul-li'">{{ item
          }}</li>
        </ul>
      </div>
      <div style="width: 100%;margin-top: 20px;">
        <el-button @click="changeHidd">添加商品</el-button>
      </div>
      <div class="con-table">
        <el-table
          :data="tableData ? tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) : [].slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          border style="width: 100%">
          <el-table-column prop="id" label="排序" align="center" width="180"></el-table-column>
          <el-table-column label="商品" width="180" align="center">
            <template #default="scope">
              <div style="display: flex;">
                <div>
                  <img style="width: 50px;" :src="scope.row.img" alt="">
                </div>
                <div style="line-height: 50px;text-align: right;margin-left: 20px;">
                  {{ scope.row.name }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="shoptype" label="商品类型" align="center" width="180"></el-table-column>
          <el-table-column prop="hdtype" label="活动类型" align="center" width="180"></el-table-column>
          <el-table-column label="消耗" align="center" width="180">
            <template #default="scope">
              {{ '-' + scope.row.xiaohao + '积分' }}
            </template>
          </el-table-column>
          <el-table-column prop="people" label="兑换人数" align="center" width="100"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="100"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template>
              <span style="margin-right: 20px;color: rgb(43, 160, 243);">修改</span>
              <span style="color: rgb(43, 160, 243);">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" :total="tableData.length ? tableData.length : 0" />
    </div>
    <div v-if="!Hidd" class="add-jifen">
      <div class="add-header">
        <i @click="changeHidd" class="el-icon-arrow-left" style="font-weight: bold;font-size: 20px;"></i>
        <span>添加积分商品</span>
      </div>
      <div class="add-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="简略标题">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="排序">
            <el-input v-model="ruleForm.paixu"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input type="number" v-model="ruleForm.num"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="净重">
            <el-input v-model="ruleForm.suttle"></el-input>
          </el-form-item>
          <el-form-item label="品牌">
            <el-input v-model="ruleForm.pinpai"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="关键词">
            <el-input v-model="ruleForm.guanjian"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="ruleForm.con"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="药品价格">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="所需积分">
            <el-input v-model="ruleForm.xiaohao"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="已出售数量">
            <el-input v-model="ruleForm.cnum">
              <template slot="append">件</template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="图片上传">
            <div style="display: flex;">
              <el-upload :on-success="ok" action="http://127.0.0.1:7001/upload" list-type="picture-card">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                      <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label=" ">
            <el-button type="primary" @click="add">保存并上架</el-button>
            <el-button type="warning" @click="addck">保存到库存</el-button>
            <el-button type="info" @click="changeHidd">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getJiFenShopDjm, addJiFenShopDjm } from '../../utils/api'
export default {
  data() {
    return {
      list: ['全部商品', '出售中', '已售罄', '仓库中', '回收站'],
      i: 0,
      tableData: [],
      newArr: [],
      currentPage: 1,
      pageSize: 3,
      Hidd: true,
      disabled: false,
      rules: {
        name: [{ required: true }]
      },
      ruleForm: {
        name: '',
        title: '',
        paixu: null,
        num: null,
        suttle: '',
        pinpai: '',
        guanjian: '',
        con: '',
        price: null,
        xiaohao: null,
        cnum: null,
        img: '',
        hdtype: '兑换',
        shoptype: '积分商品',
        people: 10,
        state: '出售中',

      },
      dialogVisible: false
    }
  },
  created() {
    this.render()
  },
  methods: {
    add() {
      if (this.ruleForm.num <= this.ruleForm.cnum) {
        this.ruleForm.state = '已售罄'
        addJiFenShopDjm(this.ruleForm).then(res => {
          this.changeHidd()
          this.render()
        })
      }
    },
    addck() {
      this.ruleForm.state = '仓库中'
      addJiFenShopDjm(this.ruleForm).then(res => {
        this.changeHidd()
        this.render()
      })
    },
    changeHidd() {
      this.Hidd = !this.Hidd
    },
    handleSizeChange2(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    ok(file, fileList) {
      const obj = file.data.replaceAll('\\\\', '\\/')
      const http = "http://127.0.0.1:7001" + obj
      const imghttp = http.replaceAll('\\', '\/')
      this.ruleForm.img = imghttp
    },
    changeI(items, index) {
      this.i = index
      if (this.i != 0) {
        this.tableData = this.newArr.filter(item => {
          if (item.state == items) {
            return item
          }
        })
      } else {
        this.tableData = this.newArr
      }
    },
    render() {
      getJiFenShopDjm().then(res => {
        this.tableData = res.data.data
        this.newArr = [...this.tableData]
      })
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
}
</script>
<style scoped>
.shop-list {
  width: 100%;
}

.content {
  width: 100%;
  margin-top: 20px;
}

.header-filter {
  width: 400px;
}

.ul-li {
  flex: 1;
  /* margin-left: 10px; */
  border-bottom: 3px solid #ccc;
  text-align: center;
  padding: 10px 0;
}

.ul-li2 {
  flex: 1;
  /* margin-left: 10px; */
  border-bottom: 3px solid #0930a7;
  text-align: center;
  padding: 10px 0;
}

.con-table {
  width: 100%;
  margin-top: 20px;
}

.add-jifen {
  width: 100%;
  margin-top: 20px;
}

.add-header {
  width: 100%;
  background-color: #e2e2e2;
  padding: 10px 0;
}

.add-content {
  width: 100%;
  margin-top: 20px;
}

</style>